/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import { List, Avatar} from 'antd';
import { foodProps, getLocalFood } from "../../untils/foodsStorage";

const FoodList = (isShow :any) => {
  type eventHandler = (key:number) => (e: React.MouseEvent) => void
  const foodList:Array<foodProps> = getLocalFood()
  const deleteFoodItem:eventHandler = (key) => (e) => {
    e.preventDefault()
    console.log(key)
  }
  const detailFoodItem:eventHandler = (key) => (e) => {
    e.preventDefault()
    console.log(key)
  }
  return(
    <div>
      {
        foodList.map(item => {
          return(
            <List.Item key={item.id}
              actions={
                [
                <a key={item.id} onClick={deleteFoodItem(item.id)}>删除</a>, 
                <a key={item.id} onClick={detailFoodItem(item.id)}>更多</a>
                ]
              }
            >
            <List.Item.Meta
              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
              title={item.name}
              description={item.price}
            />
            </List.Item>
          )
        })
      }
    </div>
  )
}

export default FoodList